<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form"  :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="params.username" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="服务商姓名">
              <el-input v-model="params.realName" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有补贴">
              <el-select v-model="params.applyStatus">
                <el-option
                  v-for="item in StatusOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <el-button
              type="primary"
              @click="excelEvent"
              v-if="
                permissionJson.indexOf(
                  'AdminUserServerRewardProvider.exportServerPoint'
                ) != -1
              "
            >导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table" v-loading="tableLoading">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        ></el-table-column>
        <el-table-column prop="username" align="center" label="服务商手机号">
           <template slot-scope="scope">
             {{scope.row.username | phonereg}}
           </template>
        </el-table-column>
        <el-table-column prop="realName" align="center" label="服务商姓名"></el-table-column>
        <el-table-column prop="nickname" align="center" label="服务商昵称"></el-table-column>
        <el-table-column prop="role" align="center" label="服务商等级"></el-table-column>
        <el-table-column prop="name" align="center" label="提现金币">
          <template slot-scope="scope">
            <el-button type="text" @click="gojum(scope.row,'3,8')">{{ scope.row.coin ||0}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="待返金币">
          <template slot-scope="scope">
            <el-button type="text" @click="gojum(scope.row,'4')">{{scope.row.waitGoldCoin ||0}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="银币">
          <template slot-scope="scope">
            <el-button type="text" @click="gojum(scope.row,'1,2')">{{scope.row.silverCoin||0}}</el-button>
          </template>
        </el-table-column>
        <!-- 1活动积分 2消费积分 3可提现额度 4可消费额度 -->
        <!--  <el-table-column prop="withdrawAmount" align="center" label="可提现额度">
          <template slot-scope="scope">
            <el-button type="text" @click="toRoutes('Integraldetails',scope.row.username,3,scope.row.userId)">{{scope.row.withdrawAmount}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="usableAmount" align="center" label="可消费额度积分">
          <template slot-scope="scope">
            <el-button type="text" @click="toRoutes('Integraldetails',scope.row.username,4,scope.row.userId)">{{scope.row.usableAmount}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="activePoint" align="center" label="活动积分">
          <template slot-scope="scope">
            <el-button type="text" @click="toRoutes('Integraldetails',scope.row.username,1,scope.row.userId)">{{scope.row.activePoint}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="usableCredit" align="center" label="消费积分">
          <template slot-scope="scope">
            <el-button type="text" @click="toRoutes('Integraldetails',scope.row.username,2,scope.row.userId)">{{scope.row.usablePoint}}</el-button>
          </template>
        </el-table-column>-->
    
        <el-table-column prop="withdrawReward" align="center" label="可提现"></el-table-column>
        <el-table-column prop="rewardAmount" align="center" label="奖励">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="
                toRoutes(
                  'bonusDetails',
                  scope.row.username,
                  2,
                  scope.row.userId
                )
              "
            >{{ scope.row.rewardAmount }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="allowance" align="center" label="是否有补贴"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <!-- <el-button type="text" @click="jum(scope.row.username,3,'severaccount')">修改余额</el-button> -->
              <el-button type="text" @click="toRoutes('remainder', scope.row.username, 3)">修改余额</el-button>
              <!-- <el-button type="text" @click="jum(scope.row.username,4,scope.row)">修改奖励</el-button> -->
              <el-button
                type="text"
                @click="toRoutes('remainderchange', scope.row.username, 4)"
              >修改奖励</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagesCon">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page_totals"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, excelExport } from "@/api/ServiceManagement";
import { exportfile } from "@/api/exporfile";

export default {
  name: "severaccount",
  data() {
    return {
      // loading层
      tableLoading: false,
      permissionJson: JSON.parse(localStorage.getItem("permissionJson")),
      //提交数据
      params: {
        pageNum: 1,
        pageSize: 10,
        username: "",
        realName: "",
        applyStatus: "-1"
      },
      //table表数据
      tableData: [],
      //总条目数
      page_totals: 60,
      //是否有补贴下拉框
      StatusOption: [
        { id: "-1", name: "全部" },
        { id: "0", name: "没有补贴" },
        { id: "1", name: "有补贴" }
      ]
    };
  },
  inject: ["reload"],
  mounted() {
    this.getList(this.params);
  },
  methods: {
    gojum(datas, amountType) {
      //列表页面
      //跳转到积分页面
      //type =1 金币 =2银币
      let type = 1;
      this.$router.push({
        name: "icons",
        query: { iconsId: datas.userId, type: type, amountType :amountType}
      });
    },
    table_index(index) {
      return (this.params.pageNum - 1) * this.params.pageSize + index + 1;
    },
    //服务商账户管理列表
    getList(e) {
      this.tableLoading = true;
      const datas = e;
      getList(datas)
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            this.tableData = res.data.data.rspDTOList;
            this.page_totals = res.data.data.count;
          } else {
            this.$message.error(res.data.msg);
          }
          this.tableLoading = false;
        })
        .catch(error => {
          this.$message.error(error);
          this.tableLoading = false;
        });
    },
    // 查询
    searchFn() {
      this.params.pageNum = 1;
      // console.log(this.params)
      this.getList(this.params);
    },
    //导出
    excelEvent() {
      let datas = { ...this.params };
      delete datas.pageNum;
      delete datas.pageSize;
      excelExport(datas).then(res => {
        exportfile(res);
      });
    },
    // 改变页面条数
    handleSizeChange(val) {
      // this.params.pageNum = 1;
      this.params.pageSize = val;
      this.getList(this.params);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.getList(this.params);
    },
    // 路由跳转
    toRoutes(e, username, type, userId) {
      const route = {
        name: e,
        query: { username: username, type: type, userId: userId }
      };
      this.$router.push(route);
    }
    // jum(datas, type, from) {
    //   console.log(datas)
    //   if (type == 1) {
    //     //跳转到积分页面
    //     this.$router.push({ name: "Integraldetails" });
    //   }
    //   if (type == 2) {
    //     //奖励明细
    //     this.$router.push({ name: "bonusDetails" });
    //   }

    //   if (type == 3) {
    //     //修改余额
    //     this.$router.push({ name: "remainder", query: { from: from } });
    //   }
    //   if (type == 4) {
    //     //修改奖励
    //     this.$router.push({ name: "remainderchange" });
    //   }
    // }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
</style>
